<template>
  <div class="cutting-sample-price">
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <u-cell-group>
      <u-cell>
        <view slot="title" class="flex f-30 flex-jsb">
          <view class="w-150 c-99"> 色卡颜色 </view>
          <view class="ce w-260 flex f-28 grey flex-aic">
            <u--input
              class="m-r-5"
              color="red"
              type="number"
              border="none"
            ></u--input>
            元/份</view
          >
        </view>
      </u-cell>
      <u-cell>
        <view slot="title" class="flex f-30 flex-jsb">
          <view class="w-200 c-99"> 色卡虚拟库存 </view>
          <view class="ce flex f-28 grey flex-aic">
            <u--input
              class="m-r-5"
              color="#6e97d9"
              type="number"
              border="none"
            ></u--input>
            /份</view
          >
        </view>
      </u-cell>
    </u-cell-group>
    <view class="flex more-view">
      <template>
        <text class="m-l-16">剪样报价</text>
      </template>
    </view>

    <u-cell-group>
      <u-cell
        :isLink="true"
        arrow-direction="right"
        rightIconStyle="color:#999;"
      >
        <view
          slot="title"
          class="flex f-30 flex-jsb"
          @click="
            goRoute(
              '/pages/application/pages/information/product-category/components/pricing-unit'
            )
          "
        >
          <view class="w-150 c-99"> 计量单位 </view>
          <view class="flex f-28 grey"> {{ unit.unitName }}</view>
        </view>
      </u-cell>
      <u-gap bgColor="#f6f6f6" height="10"></u-gap>
      <u-cell>
        <view slot="title" class="flex f-30 flex-jsb">
          <view class="w-260 c-99"> 批量设置剪样价 </view>
          <view class="ce flex f-28 grey flex-aic">
            <u--input
              class="m-r-10"
              color="#6e97d9"
              type="number"
              border="none"
              @change="cuttingSamplesChange"
              placeholder="请输入统一价格"
            ></u--input
            >/{{ unit.unitName }}</view
          >
        </view>
      </u-cell>
    </u-cell-group>

    <u-gap bgColor="#f6f6f6" height="10"></u-gap>
    <u-grid ref="tabBarSearch" :border="false" class="tabBarSearch">
      <u-grid-item
        class="tabBarSearchItem"
        @click="tabBarSearchItemClick(baseListItem)"
      >
        <view class="title">
          <text>颜色</text>
        </view>
      </u-grid-item>
      <u-grid-item> </u-grid-item>
      <u-grid-item
        class="tabBarSearchItem"
        @click="tabBarSearchItemClick(baseListItem)"
      >
        <view class="title">
          <text>剪样价</text>
        </view>
      </u-grid-item>
    </u-grid>
    <u-row
      class="tabBarSearch"
      customStyle="margin-bottom: 10px"
      v-for="(baseListItem, baseListIndex) in cuttingSamplesList"
      :key="baseListIndex"
      align
    >
      <u-col span="4" border-bottom>
        <view class="tabBarSearchItem">
          {{ baseListItem.colorNumber || "-" }}
        </view>
      </u-col>
      <u-col span="4"></u-col>
      <u-col span="4">
        <view class="tabBarSearchItem orange flex flex-aic">
          <u--input
            class="m-r-10"
            color="#6e97d9"
            type="number"
            border="none"
            v-model="baseListItem.price"
            placeholder="请输入价格"
          ></u--input>
        </view>
        <!-- <u-gap bgColor="#f6f6f6" height="10"></u-gap> -->
      </u-col>
    </u-row>
    
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      config: {
        title: "产品价格",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      unit: { unitId: "1597506549310423041", unitName: "米" },
      cuttingSamplesList: [],
    };
  },
  computed: {},
  methods: {
    getListBySpuAndUnit() {},
    cuttingSamplesChange(e) {
      for (let index = 0; index < this.cuttingSamplesList.length; index++) {
        this.cuttingSamplesList[index].price = Number(e);
        
      }
      this.$forceUpdate();
    },
    // 页面跳转
    goRoute(url, item = null, type = null) {
      this.$Router.push({
        path: url,
        query: {
          data: this.$Route.query.id || "",
          item: encodeURIComponent(JSON.stringify(item)),
        },
      });
    },
    clickBtn() {},
  },
  watch: {},
  beforeDestroy() {
    for (let index = 0; index < this.cuttingSamplesList.length; index++) {
      this.cuttingSamplesList[index].unitId = this.unit.unitId;
    }
    setTimeout(() => {
      uni.$emit("on-pdcl-arr", {
        type: 4,
        data: this.cuttingSamplesList,
      });
    }, 500);
    // uni.$off("on-color-data");
    uni.$off("on-pricing-unit");
  },
  // 页面周期函数--监听页面加载
  onLoad() {
    this.cuttingSamplesList = this.$getPageParams(
      "product-information-detail"
    ).item;
    console.log('[ this.cuttingSamplesList ] >', this.cuttingSamplesList)
    if(this.$Route.query.unitId){
      this.unit.unitId = this.$Route.query.unitId;
      this.unit.unitName = this.$Route.query.unitName;
    }
    uni.$on("on-pricing-unit", (data) => {
      this.unit.unitId = data.value;
      this.unit.unitName = data.label;
    });
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
.cutting-sample-price {
  background-color: #fff;
}
/deep/ .ce .uni-input-input {
  text-align: right;
}
/deep/ .ce .uni-input-placeholder {
  text-align: end;
  font-size: 14px;
}
/deep/ .uni-input-input {
  text-align: center;
}
/deep/ .uni-input-placeholder {
  text-align: center;
  font-size: 14px;
}
.more-view {
  height: 80rpx;
  background: #f1f1f1;
  align-items: center;
  color: #ccc;
  font-size: 28rpx;
}
.tabBarSearch {
  display: flex;
  justify-content: space-evenly !important;
  padding-top: 15upx;
  padding-bottom: 15upx;
  border-bottom: 1px solid #f6f6f6;
  &.sales {
    margin-top: 110rpx;
  }
  .orange {
    color: #d78755;
  }
  .tabBarSearchItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .title {
      margin-right: 20upx;
      color: #535353bf;
    }
  }
}
</style>